<template>
    <div>
        <Content :style="{padding: '24px', minHeight: '480px', background: '#fff'}">
            <el-row>
                <div class="login-weixin">
                    <div>打开微信，扫描二维码,点击图片可刷新</div>
                    <div class="qrcode-img">
                        <div>
                            <img :src="genUrl" alt="点击刷新" @click="getDetail()" />
                        </div>
                        <div :class="{'alt':true,'hide':hide}" @click="getDetail()">
                            <div class="void">
                                <i class="ico-refresh"></i>
                                <p class="txt" v-if="bind">已绑定了，解绑联系客服</p>
                                <p class="txt" v-else>{{txt}}</p>
                            </div>
                            <div class="mask"></div>
                        </div>
                    </div>
                </div>
            </el-row>
        </Content>
    </div>
</template>
<script>
import api from '@/api/api';
export default {
    name: 'WeiXin',
    data() {
        return {
            interval: null,
            loading: false,
            bind: false,
            hide: false,
            key: "",
            qrurl: "",
            code: "",
            txt: "二维码失效，点击刷新"

        };
    },
    mounted: function() {
        var me = this;
        me.getDetail();


    },
    computed: {
        genUrl: function() {
            return "http://xiapi.roctc.com/xiapi/qrcode.do?data=" + this.qrurl;
        }
    },
    beforeRouteLeave(to, from, next) {

        if (this.interval) {
            window.clearInterval(this.interval);

        }


        next();
    },
    methods: {
        getNotice: function() {

            var me = this;

            me.$http.post("/sys/sysuser/weixin.action", { type: 1 }).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.bind = true;
                    me.hide = false;
                    if (this.interval) {
                        window.clearInterval(this.interval);

                    }
                }
            }, response => {

            });
        },
        getDetail: function() {

            var me = this;
            me.showLoading();
            me.$http.post("/sys/sysuser/weixin.action", { type: 0 }).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.bind = true;
                    me.hide = false;
                    if (this.interval) {
                        window.clearInterval(this.interval);

                    }
                } else if (body.status == 3) {

                    me.bind = false;
                    me.hide = true;
                    me.qrurl = body.obj;
                    me.interval = setInterval(function() { me.getNotice() }, 1000);
                } else {
                    // me.errorMessage(body.info);
                    me.txt = body.info;
                }
                me.hideLoading();
            }, response => {
                me.hideLoading();
            });
        }

    }
}
</script>
<style scoped>
.login-weixin {
    float: left;
    min-height: 240px;
    height: auto !important;
    height: 240px;
    text-align: center;
}

.login-weixin .qrcode-img {
    width: 190px;
    height: 190px;
    margin: 0 auto;
    position: relative;
}

.login-weixin .qrcode-img img {
    width: 190px;
    height: 190px;
    vertical-align: top;
}

.hide {
    display: none !important;
}

.qrcode-img .alt {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    color: #fff;
    cursor: pointer;
}

.qrcode-img .alt .mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    background: #000;
}

.qrcode-img .alt .void {
    height: 52px;
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    margin-top: -26px;
    z-index: 11;
}

.login-weixin .qrcode-img .alt .void .ico-refresh {
    width: 26px;
    height: 23px;
    margin: 0 auto 10px;
    display: block;
    background-position: -294px -186px;
    background: url("https://wx.gtimg.com/pay/img/home/sprite.png?v=20190327") no-repeat;
    overflow: hidden;
}
</style>